<template >
	<div class="contain" >
		<div class="contain-header">
			<el-breadcrumb  separator="/">
				<el-breadcrumb-item>商品管理</el-breadcrumb-item>
				<el-breadcrumb-item>商品价格本</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="commodityPriceBook-body">
			<div class="body-header">
				<el-input placeholder="请输入商品编码" size="small" v-model="pageData.goodCode" clearable @clear="clear" style="width: 300px;margin-right: 10px" class="input-with-select">
					<el-button slot="append" icon="el-icon-search" size="small" @click="searchList">搜 索</el-button>
				</el-input>
				<el-button type="primary" icon="el-icon-plus" size="small" @click="addDialog = true">添 加</el-button>
			</div>
			<div class="body-table">
				<el-table
						:data="tableData"
						stripe
						style="width: 100%">
					<el-table-column
							align="center"
							prop="goodCode"
							label="商品编码">
					</el-table-column>
					<el-table-column
							align="center"
							prop="goodName"
							label="商品名称">
					</el-table-column>
					<el-table-column
							align="center"
							prop="brandName"
							label="品牌名称">
					</el-table-column>
					<el-table-column
							align="center"
							prop="goodAttribute"
							label="商品属性">
					</el-table-column>
					<el-table-column
							align="center"
							prop="unit"
							label="单位">
					</el-table-column>
					<el-table-column
							align="center"
							prop="replenishGoodPrice"
							label="进货价格(元)">
					</el-table-column>
					<el-table-column
							align="center"
							prop="suggestSalesPrice"
							label="建议销售价格(元)">
					</el-table-column>
					<el-table-column
							align="center"
							label="操作">
						<template slot-scope="scope">
							<el-button type="warning " size="mini" @click="openEdit(scope.row.id)">编 辑</el-button>
							<el-button type="danger " size="mini" @click="deleteBook(scope.row.id)">删 除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="body-page">
				<el-pagination
						background
						layout="prev, pager, next"
						@current-change="handleCurrentChange"
						:page-size="pageData.pageSize"
						:total="total">
				</el-pagination>
			</div>
		</div>
		
		<!--		新增的弹框-->
		<el-dialog
				title = "商品价格信息"
				:visible.sync = "addDialog"
				width = "40%"
				center
		>
			<div>
				<el-form  :inline="true"  label-width = "120px" >
					<el-form-item label="商品编码:" >
						<el-input  placeholder="请输入商品编码" v-model="addData.goodCode" style="width: 200px" ></el-input>
					</el-form-item>
					<el-form-item label="品牌名称:" >
						<el-input  placeholder="请输入品牌名称"  v-model="addData.brandName"  style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="商品名称:" >
						<el-input  placeholder="请输入商品名称"  v-model="addData.goodName"  style="width: 200px"  ></el-input>
					</el-form-item>
					
					<el-form-item label="商品属性:" >
						<el-input  placeholder="请输入商品属性"  v-model="addData.goodAttribute" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="进货价格(元):" >
						<el-input  placeholder="请输入进货价格(元)" v-model="addData.replenishGoodPrice" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="建议零售价(元):" >
						<el-input  placeholder="请输入建议零售价(元)" v-model="addData.suggestSalesPrice" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="单位:" >
						<el-input  placeholder="请输入单位名称"  v-model="addData.unit"  style="width: 200px"  ></el-input>
					</el-form-item>
				
				</el-form >
			</div>
			<span slot = "footer" class = "dialog-footer" >
				<el-button @click = "addDialog = false"  size="small">取 消</el-button >
				<el-button type = "primary" @click = "submitAdd"  size="small">确 定</el-button >
		  	</span >
		</el-dialog >
		<!--		编辑的弹框-->
		<el-dialog
				title = "商品价格信息"
				:visible.sync = "editDialog"
				width = "40%"
				center
		>
			<div>
				<el-form  :inline="true"  label-width = "120px" >
					<el-form-item label="商品编码:" >
						<el-input  placeholder="请输入商品编码" v-model="editData.goodCode" style="width: 200px" ></el-input>
					</el-form-item>
					<el-form-item label="品牌名称:" >
						<el-input  placeholder="请输入品牌名称"  v-model="editData.brandName"  style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="商品名称:" >
						<el-input  placeholder="请输入商品名称"  v-model="editData.goodName"  style="width: 200px"  ></el-input>
					</el-form-item>
					
					<el-form-item label="商品属性:" >
						<el-input  placeholder="请输入商品属性"  v-model="editData.goodAttribute" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="进货价格(元):" >
						<el-input  placeholder="请输入进货价格(元)" v-model="editData.replenishGoodPrice" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="建议零售价(元):" >
						<el-input  placeholder="请输入建议零售价(元)" v-model="editData.suggestSalesPrice" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="单位:" >
						<el-input  placeholder="请输入单位名称"  v-model="editData.unit"  style="width: 200px"  ></el-input>
					</el-form-item>
				
				</el-form >
			</div>
			<span slot = "footer" class = "dialog-footer" >
				<el-button @click = "editDialog = false"  size="small">取 消</el-button >
				<el-button type = "primary" @click = "submitEdit"  size="small">确 定</el-button >
		  	</span >
		</el-dialog >
	</div>
</template >

<script >
    import {priceBookList, deletePriceBook, addPriceBook, detailsPriceBook, editPriceBook} from "../api/commodityModules";
    export default {
        name: "commodityPriceBook",
        data(){
            return{
                addDialog:false,
				editDialog:false,
                pageData:{
                    goodCode:'',
                    pageIndex: 1,
                    pageSize: 10
                },
				addData:{
                    brandName: "",
                    goodAttribute: "",
                    goodCode: "",
                    goodName: "",
                    replenishGoodPrice: null,
                    suggestSalesPrice: null,
                    unit: ""
				},
                editData:{},
                tableData: [],
                total:null
            }
        },
		mounted() {
            this.getPage()
        },
        methods:{
            //列表
            async getPage(){
                const { data } = await priceBookList(this.pageData)
                if (data.code === 200) {
                    this.tableData = data.data.data
                    this.total = data.data.total
                }
			},
            //分页
            handleCurrentChange(val) {
                this.pageData.pageIndex = val
                this.getPage()
            },
			//搜索
            searchList(){
                if (!this.pageData.goodCode){
                    this.$message.warning('请输入商品编码')
				} else {
                    this.getPage()
				}
			},
			//清空
            clear(){
              	this.pageData.goodCode = ''
				this.getPage()
            },
			//删除
            deleteBook(id){
                this.$confirm('此操作将永久删除该项,是否继续?', '删除', {
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    deletePriceBook(id).then(res => {
                        if (res.data.code === 200) {
                            this.$message.success(res.data.message)
                            this.getPage()
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'撤销删除!'
                    })
                })
			},
			//新增
            async submitAdd(){
                for (let key in this.addData) {
                    if(!this.addData[key]){
                        return this.$message.error('请将信息填写完整')
                    }
                }
                const { data } = await addPriceBook(this.addData)
                if (data.code === 200) {
                    this.$message.success(data.message)
                    this.addDialog = false
                    this.addData = {}
                    await this.getPage()
                }
			},
			//打开编辑弹窗
            async openEdit(id){
                const { data } = await detailsPriceBook(id)
                if (data.code === 200) {
                    this.editDialog = true
                    this.editData = data.data
                }
			},
            //编辑
            async submitEdit(){
                for (let key in this.editData) {
                    if(!this.editData[key]){
                        return this.$message.error('请将信息填写完整')
                    }
                }
                const { data } = await editPriceBook(this.editData)
                if (data.code === 200) {
                    this.$message.success(data.message)
                    this.editDialog = false
                    await this.getPage()
                }
            }
		}
    }
</script >

<style scoped lang="less">
	.commodityPriceBook-body{
		width: 100%;
		height: calc(100% - 50px);
		background-color: #ffffff;
		.body-header{
			width: 100%;
			height: 50px;
			display: flex;
			margin-bottom: 20px;
			align-items: center;
			justify-content: flex-end;
		}
		.body-table {
			width: 100%;
			max-height: calc(100% - 150px);
		}
		.body-page{
			width: 100%;
			height: 50px;
			margin-top: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
